<template>
  <div>
    <!--  8.7 根据点击的不同的功能切换不同的标题 -->
    <el-dialog
      :title="info.type === 'add' ? '新增角色' : '编辑角色'"
      :visible.sync="info.isshow"
      width="50%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <!-- 一级分类 -->
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select
                v-model="ruleForm.first_cateid"
                @change="firstListChange"
              >
                <el-option :value="0" label="请选择"></el-option>
                <el-option
                  v-for="item in firstList"
                  :key="item.id"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 一级分类 -->
            <el-form-item label="二级分类" prop="second_cateid">
              <el-select v-model="ruleForm.second_cateid">
                <el-option :value="0" label="请选择"></el-option>
                <el-option
                  v-for="item in secondList"
                  :key="item.id"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 角色名 -->
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="ruleForm.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="市场价格" prop="market_price">
              <el-input v-model="ruleForm.market_price"></el-input>
            </el-form-item>
            <!-- 角色密码 -->
            <el-form-item label="商品图片" prop="img">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品规格" prop="specsid">
              <el-select
                v-model="ruleForm.specsid"
                @change="thirdListChange"
                clearable
              >
                <el-option :value="0" label="请选择"></el-option>
                <el-option
                  v-for="item in thirdList"
                  :key="item.id"
                  :label="item.specsname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格属性值" prop="specsattr">
              <el-select v-model="ruleForm.specsattr" multiple clearable>
                <el-option :value="0" label="请选择"></el-option>
                <el-option
                  v-for="(item, index) in fourthList"
                  :key="index"
                  :label="item"
                  :value="item"
                  ><!-- 规格的内容是他本身，所以value就是:item --></el-option
                >
              </el-select>
            </el-form-item>
            <!-- 状态选项 -->
            <el-form-item label="是否是新品" prop="isnew">
              <el-radio-group v-model="ruleForm.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否热卖" prop="ishot">
              <el-radio-group v-model="ruleForm.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 结束 -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="详细描述" name="second">
          <div id="div1"></div>
        </el-tab-pane>
      </el-tabs>
      <!--  通过不同的功能创建不同的按钮 -->

      <el-button
        v-if="info.type === 'add'"
        type="success"
        @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button v-else type="primary" @click="submitForm('ruleForm')"
        >立即修改</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-dialog>
  </div>
</template>

<script>
// 4. 导入富文本编辑器
import E from "wangeditor";
/*  导入接口 */
import {
  // 01.1一级分类的接口
  cateList,
  getInfoByPid,
  getSpecslistPid,
  getSpecsInfo,
  goodsAdd,
  goodsEdit,
} from "../../api.js";
export default {
  data() {
    return {
      clearable: true,
      // 历史图片列表
      fileList: [],
      // 当前选择标签tags
      activeName: "first",
      // 01.在打开info弹窗时获取到一级分类的列表
      // 一级分类的下拉菜单
      firstList: [],
      // 二级分类的下拉菜单
      secondList: [],
      // 规格下拉菜单
      thirdList: [],
      // 规格属性下拉菜单
      fourthList: [],
      ruleForm: {
        first_cateid: 0,
        second_cateid: 0,
        goodsname: "",
        description: "",
        img: "",
        ishot: 1,
        isnew: 1,
        market_price: 1,
        number: 3,
        price: 1,
        specsattr: "",
        specsid: 0,
        status: 1,
      },
      // 表单验证规则
      rules: {
        goodsname: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        market_price: [
          { required: true, message: "请输入市场价格", trigger: "blur" },
        ],
      },
      // 4.1 定义全局属性绑定编辑器,通过定义他的值来判断是否需要创建.
      editor: null,
    };
  },
  props: ["info"],
  created() {
    // 01.3获取一级分类
    this.getFirstList();

    // 01.6 获取三级商品属性分类
    this.getspecsList();
  },
  methods: {
    // 01.2获取一级分类
    async getFirstList() {
      let res = await cateList();
      this.firstList = res.list;
    },
    // 给表单赋值
    setValue(info) {
      // 打开弹窗，先将历史图片列表清空
      this.fileList = [];

      // 如果是编辑再请求一次接口
      if (this.info.type === "edit") {
        if (typeof info.specsattr === "string") {
          info.specsattr = info.specsattr.split(",");
        } else {
          if (info.specsattr.length < 0) {
            info.specsattr = info.specsattr.join(",");
          }
        }
        this.fourthList = info.specsattr;
        this.secondCall(info);
      }

      this.ruleForm = { ...info };
      // 有历史图片，所以弹窗显示先清空图片列表

      // 如果当前有图片就添加
      if (this.ruleForm.img) {
        this.fileList.push({
          name: "good_img",
          url: this.$host + this.ruleForm.img,
        });
      }
      // 3.1 打开弹框时初始化编辑器,且不能重复创建
      // 3.2 打开弹窗时dom还没加载出来，会报错，所以就延迟执行
      this.$nextTick(() => {
        // 4.3富文本首次为null，为假，取反后为真进行创建,第二次已经为真，代表已经创建，取反后为假走不存在的else分支。顺带执行设置编辑器
        if (!this.editor) {
          this.editor = new E("#div1");
          this.editor.create();
        }
        // 4.4 编辑时将内容设置给编辑器
        this.editor.txt.html(this.ruleForm.description);
      });
    },
    // 02.监听一级分类每次发生改变同时改变二级分类内容
    async firstListChange() {
      // 2.4 每次一级菜单选择后都把二级菜单的值清空
      this.ruleForm.second_cateid = 0;
      // 02.1 方法1：遍历获取到的总数据，如果当前选择项的id和遍历到的id一样就输出当前项的子元素。
      // this.firstList.forEach((item) => {
      //  console.log(item.id);
      //   if (item.id == this.ruleForm.first_cateid) {
      //     console.log(item.children);
      //   }
      // });

      if (this.ruleForm.first_cateid != 0) {
        // 02.2 方法二：用当前项的id请求接口返回相应的值，把返回的值给第二个下拉框。
        // console.log(this.ruleForm.first_cateid);
        let res = await getInfoByPid(this.ruleForm.first_cateid);
        // 02.3 将返回的值给第二个下拉列表，遍历出来相应的值
        this.secondList = res.list;
        // console.log(this.secondList);
      } else {
        this.ruleForm.specsid = 0;
        this.secondList = [];
      }
    },
    // 弹窗打开获取商品规格
    async getspecsList() {
      let res = await getSpecslistPid();
      this.thirdList = res.list;
    },
    // 02.监听3级分类每次发生改变,生成新的规格属性
    async thirdListChange() {
      if (this.ruleForm.specsid != 0) {
        let res = await getSpecsInfo(this.ruleForm.specsid);
        this.fourthList = res.list[0].attrs;
        // 监听在三级分类发生改变后将规格属性清空,移除上次选择的tag值
        this.ruleForm.specsattr = null;
      }
    },
    // 删除图片
    handleRemove() {
      this.ruleForm.img = "";
    },
    // 修改图片
    handleChange(file) {
      this.ruleForm.img = file.raw;
    },
    // 编辑的时候二次调用
    async secondCall(info) {
      let res = await getInfoByPid(info.first_cateid);
      this.secondList = res.list;
      // this.getspecsList();
      // let arr = info.specsattr.split(",");
      // this.fourthList = arr;
      // this.ruleForm.specsattr = "";
      // let con = await getSpecsInfo(this.ruleForm.specsid);
      // this.fourthList = con.list[0].attrs;
    },
    submitForm(formName) {
      /* 提交验证，所有点击的不同功能都在这里验证*/
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 在修改之前判断是否有后台不需要的值，有的话删除
          this.ruleForm.firstcatename ? delete this.ruleForm.firstcatename : "";
          this.ruleForm.secondcatename
            ? delete this.ruleForm.secondcatename
            : "";
          //  04 获取到文本框的内容
          this.ruleForm.description = this.editor.txt.html();
          // 4.formdata格式的数据
          let formdata = new FormData();
          for (const key in this.ruleForm) {
            formdata.append(key, this.ruleForm[key]);
          }
          /* 请求分支 */
          //立即创建分支
          if (this.info.type === "add") {
            let res = await goodsAdd(formdata);
          } else {
            // 立即编辑分支
            let res = await goodsEdit(formdata);
          }
          /*  通知list更新 并 渲染数据 */
          // this.$emit("updata");
        } else {
          // 点击警告分支
          console.log("error submit!!");
          return false;
        }
      });
      this.info.isshow = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>